<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>定义组件-4[子向父组件传递值[emit]]</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="app">
			<parent></parent>
		</div>
		<!-- 1.定义子组件 -->
		<template id="child">
			<div>
				<button @click="childClick">发送给父组件</button>
				<input type="text" v-model="msg" />
			</div>
		</template>
	</body>
	<script>
		//定义父组件
		Vue.component("parent", {
			template: "<div><child @childfn='parfn'>使用子组件：</child>"+
			"<br /> 从子组件获取的数据为：{{msg}}</div>",

			data() {
				return {
					msg: "我是父组件的内容"
				}
			},
			methods: {
				parfn(playMsg) {
					this.msg = playMsg
				}
			}
		})
		//对子组件的模板进行引用
		Vue.component("child", {
			template: "#child",
			data() {
				return {
					msg: "我是子组件"
				}
			},
			methods: {
				childClick() {
					this.$emit("childfn", this.msg);
				}
			}
		})
		var vm = new Vue({
			el: "#app"
		})
	</script>

</html>